<template>
  <div>
    <!-- 订单确认页面 -->
    <Top></Top>

    <el-row>
      <!-- 居中 -->
      <el-col :span="20"
              :offset="2">
        <el-row>
          <!-- 收货地址 -->
          <el-table :data="addressList"
                    style="width: 100%">
            <el-table-column label="选择"
                             width="80">
              <template slot-scope="scope">
                <el-radio v-model="radio"
                          :label="scope.row.id"></el-radio>
              </template>
            </el-table-column>
            <el-table-column prop="accept"
                             label="收货人"
                             width="120"
                             align="center">
            </el-table-column>
            <el-table-column prop="cellphone"
                             label="手机号"
                             width="180"
                             align="center">
            </el-table-column>
            <el-table-column label="地址"
                             width="300"
                             align="center">
              <template slot-scope="scope">
                <span>{{scope.row.province + scope.row.city + scope.row.county + scope.row.detailaddress}}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作"
                             width="240"
                             align="center">
              <template slot-scope="scope">
                <el-button type="text"
                           size="mini"
                           v-if="scope.row.defaultaddr == 'n'">设为默认</el-button>
                <el-button type="warning"
                           size="mini"
                           @click="delAddr(scope)">删除</el-button>
                <el-button type="info"
                           size="mini"
                           @click="editAddr">编辑</el-button>
              </template>

            </el-table-column>

          </el-table>
        </el-row>

        <!--添加收货地址-->
        <el-row>
          <el-col :span="3"
                  :offset="21"
                  style="text-align: right">
            <el-button type="primary"
                       size="mini"
                       @click="dialogVisible = true">添加收获地址</el-button>
          </el-col>
          <!-- 对话框 -->
          <el-dialog title="新增收货地址"
                     :visible.sync="dialogVisible"
                     width="50%">
            <!-- 需要新增的内容 -->
            <div>
              <AddAddress @close="dialogVisible = false"
                          @submitAddr="submitAddr"></AddAddress>
            </div>
          </el-dialog>
        </el-row>

        <!-- 商品信息 -->
        <el-row>
          <el-table :data="goodsList"
                    style="width: 100%">
            <el-table-column label="图片"
                             width="120"
                             align="center">
              <template slot-scope="scope">
                <img :src="$imgPrefix + scope.row.image"
                     alt=""
                     style="width: 80px; height: 80px;" />
              </template>
            </el-table-column>
            <el-table-column prop="name"
                             label="商品名字"
                             width="360"
                             align="center">
            </el-table-column>
            <el-table-column prop="price"
                             label="单价"
                             align="center">
            </el-table-column>
            <el-table-column label="数量"
                             prop="num"
                             width="200px"
                             align="center">

            </el-table-column>
            <el-table-column label="小计"
                             align="center">
              <template slot-scope="scope">
                <span>{{(scope.row.price * scope.row.num).toFixed(2)}}</span>
              </template>
            </el-table-column>
          </el-table>
        </el-row>
        
        <!-- 下单 -->
        <el-row>
          <el-col :span="8"
                  :offset="16"
                  style="text-align: right">
            <span>总价：{{getTotal()}}</span>
            <el-button type="primary"
                       @click="goPay">结算</el-button>
          </el-col>
        </el-row>
      </el-col>
    </el-row>

    <Footer></Footer>

  </div>

</template>
<script>
//1. 可以通过import导入组件--相对路径
import Top from './commons/top.vue'
import Header from './commons/header.vue'
import Footer from './commons/foot.vue'
import AddAddress from './commons/addAddress.vue'
export default {
  data() {
    return {
      //从本地中获取购物车里选中的数据
      goodsList: JSON.parse(sessionStorage.getItem('goodsList')),
      addressList: [],
      //设置初始地址的id为1
      radio: 1,
      //添加收货地址的对话框默认为不显示
      dialogVisible: false,
      //cid的字符串
      cids: []
    }
  },
  components: {
    Top,
    Header,
    Footer,
    AddAddress
  },
  methods: {
   
    submitAddr(address) { // 添加一条地址
      //1.关闭提示框
      this.dialogVisible = false
      //2.提交数据
      this.$axios.post('/address/submitAddr', address).then(res => {
        console.log(res.data)
        address.id = res.data.data
        address.defaultaddr = 'n'
      })
      //3.页面显示新增的数据
      this.addressList.push(address)
    },
        
    getTotal() {//获得订单页面的总价
      //遍历
      let total = 0
      let cids = []
      for (const cart of this.goodsList) {
        //计算总价
        total = total + cart.price * cart.num
        //拼接字符串
        cids.push(cart.id)
      }
      this.cids = cids
      return total
    },

    goPay() {//结算
      //获取地址id，购物车中的商品id
      let data = {
        //地址id
        aid: this.radio,
        //购物车中商品的id数组
        cids: this.cids
      }
      console.log(data)
      // 下订单
      this.$axios.post('/order/addOrder', data).then(res => {
        console.log(res.data)
        if(res.data.code == 200){
          //删除sessionstorage中的购物车信息
          sessionStorage.removeItem("goodsList")
          //跳转到支付页面，展示订单信息
          //1.将订单信息放到session Storage中
          sessionStorage.setItem("order",JSON.stringify(res.data.data))
          //2.跳页面
          this.$router.push("/pay")
        }
      })
    }
  },
  mounted() {//页面挂载时执行
    console.log(this.goodsList)
    this.$axios.get('/address/findArrByUid').then(res => {
      console.log(res.data)
      this.addressList = res.data.data
      //找到默认的收货地址
      for (const addr of this.addressList) {
        if (addr.defaultaddr == 'y') {
          this.radio = addr.id
          break
        }
      }
    })
  }
}
</script>
<style scoped>
</style>

